// const { effect, reactive } = require("@vue/reactivity");

// const {effectWatch,reactive} = require('./core/reactive/index')
import { effectWatch, reactive } from './core/reactive/index.js'

import { h } from './core/h.js'




// //一： 不能自动响应，
// let a = 10
// let b = a + 10
// console.log(b);
// a=20
// console.log(1,b);

// // 二：手动响应，
// let a = 10
// function update(){
//     b=a+10
//     console.log(2,b);
// }
// b=20
// update()
// 三：引入vue3的响应模块进行自动响应
let a = reactive({
  value: 1,
});
let b;
effectWatch(() => {
  // 函数会用的时候自动执行
  b = a.value + 10;
  // console.log('b', b);
});
// 改变a，b也会改变
a.value = 30;


// vue3de


export default {
  // template-》render
  render(context) {
    // 可以去构建view试图，相当于b
    // 用effectWatch包裹，才能让数据变化后，刷新试图
    // effectWatch(() => {
    // 此时的视图是每次都要重新创建的。
    // 如何计算出最小的更新节点，中间层Vdom（js对象）
    // document.body.innerText = ``//清空下视图
    // const div = document.createElement("div");
    // console.log(div, 'div');
    // div.innerText = context.state.count;
    // // // root
    // // document.body.append(div)
    // return div
    // // })
    return h('div',
      {
        id: 'app-id' + context.state.count,
        class: 'showTime'
      },
      // String(context.state.count)
      [
        h('p', null, String(context.state.count)),
        h('p', null, 'haha')

      ]
    )


  },
  setup() {
    // 响应式数据，a=state
    const state = reactive({
      count: 0
    })
    window.state = state
    return { state }
  }
}
// App.render(App.setup())
